<template>
	<div class="activity-list table-theme">
		<head-title title="营销--裂变活动列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="options"
						:value="status"
						placeholder="状态"
						type="status"
						@value="setSelectValue"
					>
					</select-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
					<div class="add" style="margin-right: 10px;">
						<el-button type="primary" @click="addActivity">添加活动</el-button>
					</div>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="wList">
				<el-table-column label="序号" align="center" prop="activity_id"></el-table-column>
				<el-table-column label="标题" align="center" prop="title"></el-table-column>
				<el-table-column label="副标题" align="center" prop="subtitle"></el-table-column>
				<el-table-column label="活动价" align="center" prop="activity_price"></el-table-column>
				<el-table-column label="划线价" align="center" prop="crossed_price"></el-table-column>
				<el-table-column label="主图" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="海报" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.poster"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="客服" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.service_code"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.activity_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="分销级别" align="center" prop="">
					<template slot-scope="scope">
						{{scope.row.level}}级
					</template>
				</el-table-column>
				<el-table-column label="收益类型" align="center" prop="distribution_type_name"></el-table-column>
				<el-table-column label="一级收益" align="center" prop="first_profit"></el-table-column>
				<el-table-column label="二级收益" align="center" prop="second_profit"></el-table-column>
				<el-table-column label="开始时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="结束时间" align="center" prop="end_time"></el-table-column>
				<el-table-column label="二维码" align="center">
					<template slot-scope="scope">
						<el-popover placement="left" title="" trigger="hover">
							<vue-qr :text="codeUrl + scope.row.activity_id" :size="200"></vue-qr>
							<vue-qr slot="reference" :text="codeUrl + scope.row.activity_id" :size="60"></vue-qr>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="链接" align="center" prop="end_time" width="200">
					<template slot-scope="scope">
						<p>{{codeUrl}}{{ scope.row.activity_id }}?v={{ Math.round(Math.random()*10) + scope.$index}}</p>
					</template>

				</el-table-column>

				<el-table-column label="操作" align="center" width="160">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="editActive(scope.row.activity_id)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import VueQr from 'vue-qr';
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from "@/components/SelectView";
	export default {
		components: {
			ImgPopover,
			VueQr,
			SelectView
		},
		data() {
			return {
				admin_type: localStorage.getItem('admin_type'),
				codeUrl: 'https://jiaju01.cn/wap/move/fission/#/?a_id=',
				status: 1,
				options: [{
						value: 1,
						label: '上架'
					},
					{
						value: 2,
						label: '下架'
					}
				],
				selectContent: '', // 分类搜索平输入框的值
				classSelect: '', // 分类搜索
				searchOption: [{
					value: 0,
					label: '活动ID'
				}],
				wList: [],
				total: 0,
				totalData: 0,
				page: 0,
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					status: this.status,
				};
				if (this.admin_type != 1) data.store_id = localStorage.getItem('store_id')
				if (this.classSelect == 0) data.activity_id = this.selectContent;
				this.$http(this.$ApiList.ActivityList, data).then(res => {
					this.wList = res.datas.data;
					this.total = res.datas.count;
					this.totalData = res.count;
				});
			},
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			addActivity() {
				this.$router.push({
					path: '/add_activity',
					query: {
						type: 0
					}
				})
			},
			editActive(activity_id) {
				this.$router.push({
					path: '/add_activity',
					query: {
						type: 1,
						id: activity_id
					}
				})
			},
			// 上下架
			upDown(e, activity_id) {
				let data = {
					activity_id: activity_id,
					status: e
				};
				this.$http(this.$ApiList.ActivityDown, data).then(res => {
					this.$layer.msg(res.datas);
				});
			},
			// 刷新
			refreshPage() {
				this.classSelect = '';
				this.selectContent = '';
				this.page = 1;
				this.init();
			},
			setSelectValue(obj){
				const { type,value } = obj
				switch (type) {
					case 'status':
						this.status = value
						break;
				
					default:
						break;
				}
				this.init()
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss">
	.activity-list {
	}
</style>
